<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="plugin-group-modal">
    <el-dialog title="管理插件组" :visible.sync="plugin_group_form.visible" center width="1200px" class="modern-plugin-group-dialog">
        <div class="plugin-group-modal-container">
            <!-- 顶部搜索区域 -->
            <div class="search-section">
                <div class="search-wrapper">
                    <el-input
                        v-model="pluginGroupSearchText"
                        placeholder="搜索插件组名称、描述或类型..."
                        prefix-icon="el-icon-search"
                        clearable
                        size="large"
                        class="modern-search-input">
                    </el-input>
                </div>
                <div class="search-stats">
                    <span class="stats-text">共找到 {{filteredPluginGroupList.length}} 个插件组</span>
                </div>
            </div>

            <!-- 选项卡区域 -->
            <div class="tabs-section">
                <el-tabs v-model="pluginGroupActiveTab" class="modern-tabs">
                    <el-tab-pane class="tab-content" label="全部插件组" name="all">
                        <div class="plugin-group-grid-container">
                            <div class="plugin-group-grid">
                                <div class="modern-plugin-group-card" 
                                     v-for="(group, index) in filteredPluginGroupList" 
                                     :key="index" 
                                     :class="['plugin-group-type-' + group.groupType, group.isBound ? 'is-bound' : '']">
                                    
                                    <!-- 卡片头部 -->
                                    <div class="card-header">
                                        <div class="plugin-group-icon-wrapper">
                                            <div class="plugin-group-icon" :class="'icon-group-type-' + group.groupType">
                                                <i :class="getPluginGroupIcon(group.groupType)"></i>
                                            </div>
                                            <div class="plugin-group-status-indicator" v-if="group.isBound">
                                                <i class="el-icon-check"></i>
                                            </div>
                                        </div>
                                        
                                        <div class="card-title-section">
                                            <h4 class="plugin-group-title">{{group.groupName}}</h4>
                                            <span class="plugin-group-type-badge" :class="'type-' + group.groupType">
                                                {{group.groupTypeName}}
                                            </span>
                                        </div>

                                        <div class="card-actions">
                                            <el-button v-if="!group.isBound" 
                                                     type="primary" 
                                                     size="mini" 
                                                     @click="bindPluginGroup(group)"
                                                     class="action-btn bind-btn">
                                                <i class="el-icon-plus"></i> 添加
                                            </el-button>
                                            <el-button v-if="group.isBound" 
                                                     type="danger" 
                                                     size="mini" 
                                                     @click="unbindPluginGroup(group)"
                                                     class="action-btn unbind-btn">
                                                <i class="el-icon-minus"></i> 移除
                                            </el-button>
                                        </div>
                                    </div>

                                    <!-- 卡片内容 -->
                                    <div class="card-content">
                                        <div class="plugin-group-desc">
                                            <p>{{group.groupDesc || '暂无描述'}}</p>
                                        </div>

                                        <!-- 插件组包含的插件列表 -->
                                        <div class="plugins-in-group" v-if="group.plugins && group.plugins.length > 0">
                                            <div class="plugins-header">
                                                <span class="plugins-title">包含插件 ({{group.plugins.length}})</span>
                                            </div>
                                            <div class="plugins-list">
                                                <div class="plugin-item" 
                                                     v-for="(plugin, pidx) in group.plugins.slice(0, 3)" 
                                                     :key="pidx"
                                                     :title="plugin.pluginName + ' - ' + plugin.pluginDesc">
                                                    <div class="plugin-mini-icon" :class="'mini-icon-type-' + plugin.pluginType">
                                                        <i :class="getPluginIcon(plugin.pluginType)"></i>
                                                    </div>
                                                    <span class="plugin-mini-name">{{plugin.pluginLabel || plugin.pluginName}}</span>
                                                </div>
                                                <div class="plugin-item more-plugins" v-if="group.plugins.length > 3">
                                                    <span class="more-text">+{{group.plugins.length - 3}}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 优先级设置 (仅已绑定时显示) -->
                                        <div class="priority-section" v-if="group.isBound">
                                            <div class="priority-label">优先级:</div>
                                            <el-input-number 
                                                v-model="group.priority" 
                                                size="mini" 
                                                :min="0" 
                                                :max="100"
                                                @change="updatePluginGroupPriority(group)"
                                                class="priority-input">
                                            </el-input-number>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <el-tab-pane class="tab-content" label="已添加插件组" name="bound">
                        <div class="bound-plugin-groups-container">
                            <div class="bound-plugin-groups-grid" v-if="boundPluginGroups.length > 0">
                                <div class="bound-plugin-group-card" 
                                     v-for="(group, index) in boundPluginGroups" 
                                     :key="index"
                                     :class="'plugin-group-type-' + group.groupType">
                                    
                                    <div class="bound-card-header">
                                        <div class="bound-group-info">
                                            <div class="bound-group-icon" :class="'icon-group-type-' + group.groupType">
                                                <i :class="getPluginGroupIcon(group.groupType)"></i>
                                            </div>
                                            <div class="bound-group-details">
                                                <h4 class="bound-group-name">{{group.groupName}}</h4>
                                                <span class="bound-group-type">{{group.groupTypeName}}</span>
                                            </div>
                                        </div>
                                        
                                        <div class="bound-card-actions">
                                            <el-button type="text" 
                                                     size="mini" 
                                                     @click="configPluginGroup(group)"
                                                     class="config-btn">
                                                <i class="el-icon-setting"></i> 配置
                                            </el-button>
                                            <el-button type="text" 
                                                     size="mini" 
                                                     @click="unbindPluginGroup(group)"
                                                     class="remove-btn">
                                                <i class="el-icon-delete"></i> 移除
                                            </el-button>
                                        </div>
                                    </div>

                                    <div class="bound-card-content">
                                        <div class="bound-plugins-preview">
                                            <div class="bound-plugins-title">包含 {{group.plugins.length}} 个插件</div>
                                            <div class="bound-plugins-icons">
                                                <div class="bound-plugin-icon" 
                                                     v-for="(plugin, pidx) in group.plugins.slice(0, 5)" 
                                                     :key="pidx"
                                                     :title="plugin.pluginName">
                                                    <i :class="getPluginIcon(plugin.pluginType)"></i>
                                                </div>
                                                <div class="bound-plugin-more" v-if="group.plugins.length > 5">
                                                    +{{group.plugins.length - 5}}
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="bound-priority-display">
                                            <span class="priority-label">优先级: {{group.priority || 0}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="empty-state" v-else>
                                <div class="empty-icon">
                                    <i class="el-icon-box"></i>
                                </div>
                                <p class="empty-text">暂未添加任何插件组</p>
                                <p class="empty-hint">在"全部插件组"选项卡中添加插件组</p>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="plugin_group_form.visible = false" size="large">关 闭</el-button>
            <el-button type="primary" @click="savePluginGroupConfig" size="large">
                <i class="el-icon-check"></i> 保存配置
            </el-button>
        </span>
    </el-dialog>
</th:block>

</body>
</html>